<template>
  <t-space direction="vertical" style="margin-top:10px;">
    <t-form  layout="inline" >
        <t-form-item label="组名">
          <t-input v-model="searchKey" placeholder="请输入组名称" style="width:200px"></t-input>
          <t-button @click="search" variant="outline">查询</t-button>
          <t-button  theme="default" @click="add">新增设置</t-button>
        </t-form-item>
      </t-form>

      <t-table :data="list" :columns="COLUMNS" row-key="id" title="相关设置">
        <template #op="d">
            <t-button variant="dashed" @click="openEdit(d.row)">编辑</t-button>
            <t-popconfirm content="确认删除吗？" @confirm="openDelete(d.row)">
              <t-button theme="danger" variant="dashed">删除</t-button>
            </t-popconfirm>
        </template>
      </t-table>
  </t-space>


  <t-dialog :visible="visibleDialog" header="自定义设置" :footer="null" @close="visibleDialog=false">
    <t-form ref="form" class="base-form" :data="formData" :rules="FORM_RULES" label-align="right"
      @submit="onSubmit" @reset="onReset">
      <t-form-item  label="组名称" name="group">
        <t-input v-model="formData.group" placeholder="组名称"></t-input>
      </t-form-item>
      <t-form-item  label="Key" name="key">
        <t-input v-model="formData.key" placeholder="请输入Key"></t-input>
      </t-form-item>
      <t-form-item  label="Value" name="value">
        <t-textarea v-model="editValue" :autosize="{ minRows: 5 }" placeholder="请输入Value" @change="changeValue"></t-textarea>
      </t-form-item>
      <t-form-item  label="顺序" name="order">
        <t-input-number v-model="formData.order" placeholder="请输入Order"></t-input-number>
      </t-form-item>
      <t-form-item>
        <t-button type="submit">保存</t-button><t-button theme="default" variant="base" type="reset" >重置</t-button>
      </t-form-item>
    </t-form>
  </t-dialog>

</template>

<script setup lang="ts">
  import {
    MessagePlugin
  } from 'tdesign-vue-next';
  import {
    ref, defineEmits,onMounted,watch
  } from 'vue';
  import {
    settingModel
  } from '@/api/model/settingsModel';
  import {getSettingsList,saveSettings,deleteSettings} from '@/api/settings'

  const emits = defineEmits(['close'])
  const formData = ref({
    id:'',
    created_by:'1',
    flags:'',
    group:'',
    key:'',
    type:'',
    updated_by:'',
    value:'',
    order:0
  })
  const list=ref<Array<settingModel>>()
  const visibleDialog=ref(false)
  const searchKey=ref('')
  const search=()=>{
    if(searchKey.value.length==0)
    {
      MessagePlugin.error('请输入组名称')
      return;
    }
      fetchData()
  }
  const fetchData=()=>{
       getSettingsList(searchKey.value).then(ret=>{
         //console.log('config ret',JSON.stringify(ret))
         list.value=ret
       })
    }
  const COLUMNS=[
     {
          title: 'Key',
          align: 'left',
          ellipsis: true,
          colKey: 'key',
          //fixed: 'left',
      },
      {
        title: 'Value',
        align: 'left',
        ellipsis: true,
        colKey: 'value',
        //fixed: 'left',
      },

      {
        title: '显示顺序',
        align: 'left',
        width: 120,
        ellipsis: true,
        colKey: 'order',
        //fixed: 'left',
      },
      {
        title: '组名称',
        align: 'left',
        width: 150,
        ellipsis: true,
        colKey: 'group',
        //fixed: 'left',
      },
      {
        title: '操作',
        align: 'left',
        width: 180,
        ellipsis: true,
        colKey: 'op',
        //fixed: 'left',
      },
  ]
  const editValue=ref('')
  const openEdit=(obj:any)=>{
    console.log('openEdit',JSON.stringify(obj))
    formData.value=obj
    editValue.value=obj.value
    visibleDialog.value=true
  }
  const add=()=>{
    formData.value = {
      id:'',
      created_by:'1',
      flags:'',
      group:'',
      key:'',
      type:'',
      updated_by:'',
      value:'',
      order:0
    }
    visibleDialog.value=true
  }
  const onSubmit = ({validateResult,firstError}) => {
    //console.log('list',JSON.stringify(list.value))
    if (validateResult === true) {
      let data=[]
      if(editValue.value.indexOf('{')!==-1)
      {
        formData.value.value=JSON.stringify(editValue.value);
      }
      data.push(formData.value)
      saveSettings(data)
      .then(ret=>{
        fetchData()
        MessagePlugin.success('保存成功');
      })
      .catch(e=>{
        if(e.message)
        {
          MessagePlugin.error(e.message);
        }else
        {
          MessagePlugin.error(e.msg);
        }
      })


    }
  };
  const onReset=()=>{

  }
  const changeValue=()=>{
    formData.value.value=JSON.stringify(editValue.value)
  }
  const openDelete=(obj:any)=>{
    deleteSettings(obj.id)
    .then(ret=>{
      MessagePlugin.success('己删除')
      let d=list.value.filter((item)=>item.id!=obj.id)
      list.value=d
    })
    .catch(e=>{
      if(e.message)
      {
        MessagePlugin.error(e.message);
      }else
      {
        MessagePlugin.error(e.msg);
      }
    })
  }
  const FORM_RULES={
    group:[
      {
        required:true,message:'组名必填',type:'error'
      }
    ],
    key:[
      {
        required:true,message:'Key必填',type:'error'
      }
    ],
    value:[
      {
        required:true,message:'Value必填',type:'error'
      }
    ]
  }



onMounted(()=>{
  fetchData()
})
watch(()=>visibleDialog.value,
()=>{
  if(visibleDialog.value==true)
  {

    if(editValue.value.includes('{'))
    {
      editValue.value=JSON.parse(formData.value.value)
    }

  }else
  {
    editValue.value=formData.value.value
  }
})
</script>

<style>
</style>
